<template>
  <div class="center-page">
    <h1>动态生成表单</h1>
    <div class="pages">
      <div class="box">
        <template v-for="item in data">
          <div class="tags" :class="{ active: itemData[item.id] && itemData[item.id].length !== 0 }">
            <div class="tip" :class="{ activeTip: itemData[item.id] && itemData[item.id].length !== 0 }"></div>
            <div class="name">{{ item.name }}</div>
            <div class="opt">
              <span @click="add(item)" style="color: ">+</span>
              <span @click="sub(item)">-</span>
            </div>
          </div>
          <div class="wrapper">
            <template v-for="(item1, index) in itemData[item.id]">
              <div class="box-wrapper">
                <el-form style="width: 80%" label-width="120px">
                  <el-form-item label="用户名">
                    <el-input v-model="item1.value" />
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="item1.password" />
                  </el-form-item>
                  <el-form-item label="请选择">
                    <el-select v-model="item1.game" placeholder="请选择" @change="selectChange(item, item1, index)">
                      <el-option v-for="options in data[index]?.children" :label="options.label" :value="options.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="请选择角色">
                    <el-select v-model="item1.role" placeholder="请选择人物">
                      <el-option
                        v-for="options in data[index]?.children[item1.gameIndex]?.children"
                        :label="options.label"
                        :value="options.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-form>
                <div class="count">{{ index + 1 }}</div>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
    <el-button @click="handleSubmit" type="primary">提交</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const data: any[] = [
  {
    name: '系统',
    value: 1,
    id: 1,
    children: [
      {
        label: '王者荣耀',
        value: 'king',
        children: [
          {
            label: '貂蝉',
            value: '貂蝉'
          },
          {
            label: '姜子牙',
            value: '姜子牙'
          },
          {
            label: '王昭君',
            value: '王昭君'
          }
        ]
      },
      {
        label: '阴阳师',
        value: 'yin',
        children: [
          {
            label: '茨木',
            value: '茨木'
          },
          {
            label: '酒吞',
            value: '酒吞'
          },
          {
            label: '大蛇',
            value: '大蛇'
          }
        ]
      }
    ]
  },
  {
    name: '测试',
    value: 1,
    id: 2,
    children: [
      {
        label: '王者荣耀',
        value: 'king',
        children: [
          {
            label: '貂蝉',
            value: '貂蝉'
          },
          {
            label: '姜子牙',
            value: '姜子牙'
          },
          {
            label: '王昭君',
            value: '王昭君'
          }
        ]
      },
      {
        label: '阴阳师',
        value: 'yin',
        children: [
          {
            label: '茨木',
            value: '茨木'
          },
          {
            label: '酒吞',
            value: '酒吞'
          },
          {
            label: '大蛇',
            value: '大蛇'
          }
        ]
      }
    ]
  },
  {
    name: '建议',
    value: 1,
    id: 3
  },
  {
    name: '甲乙',
    value: 1,
    id: 4
  }
]

const itemData: any = ref({})

const add = (item: any) => {
  const keys = Object.keys(itemData.value)
  const key = String(item.id)
  const res = keys.indexOf(key)
  if (res === -1) {
    itemData.value[key] = [{ password: '', value: '', game: '', role: '', gameIndex: 0 }]
  } else {
    itemData.value[key].push({ password: '', value: '', game: '', role: '', gameIndex: 0 })
  }
}

const sub = (item: any) => {
  const keys = Object.keys(itemData.value)
  const key = String(item.id)
  if (keys.indexOf(key) !== -1) {
    let index = itemData.value[key].length - 1
    itemData.value[key].splice(index, 1)
  }
}

const selectChange = (item: any, value: any, index: number) => {
  const currentArray = data[index].children
  const currentValue = itemData.value[item.id][index].game
  const res = currentArray.findIndex((options: any) => options.value === currentValue)
  const result = currentArray.find((options: any) => options.value === currentValue)
  itemData.value[item.id][index].role = result.children[index].label
  itemData.value[item.id][index].gameIndex = res
}

const handleSubmit = () => {
  console.log(itemData.value)
}
</script>

<style scoped lang="scss">
.center-page {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  h1 {
    font-size: 30px;
    color: red;
  }
}
.pages {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  .box {
    padding: 0 10px;
    width: 70%;
    .tags {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
      background-color: #c9c9c9;
      height: 40px;
      .tip {
        height: 20px;
        width: 3px;
        background: #016dae;
        margin-right: 10px;
      }
      .name {
        flex: 1;
        text-align: left;
      }
      .opt {
        span {
          display: inline-block;
          width: 20px;
          height: 20px;
          border: 1px solid #fff;
          border-radius: 50%;
          line-height: 20px;
          text-align: center;
          cursor: pointer;
          &:last-child {
            margin: 0 10px;
          }
        }
      }
    }
  }
}
.active {
  background: #016dae !important;
  color: #fff;
}
.box-wrapper {
  position: relative;
  padding: 20px 10px;
  border-left: 3px solid #016dae;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background: #ffffff;
  margin: 10px 0;
  .count {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-radius: 20px 0 4px 0;
    background: #016dae;
    color: #fff;
    text-align: center;
    line-height: 20px;
  }
}
.activeTip {
  background: #fff !important;
}
</style>
